/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, ComputedRef, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* enum */
import { BaseSelectUserComponentNameEnum, BaseSelectUserMax, BaseSelectUserModeEnum, SelectUser } from '@src/component/common/BaseSelectUser/model'
/* component */
import BaseSelectUser from '@src/component/common/BaseSelectUser'
/* scss */
import '@src/component/common/BaseSelectUser/components/Input/index.scss'
/* util */
import { t } from '@src/locales'

export type BaseSelectUserInputProps = {
  collapse: boolean;
  multiple: boolean;
  max: number;
  placeholder: string;
  value: Record<string, any>[];
  error: boolean;
}

export interface BaseSelectUserInputSetupState {
  
}

export enum BaseSelectUserInputEmitEventNameEnum {
  Input = 'input'
}

export type BaseSelectUserInputInstance = ComponentInstance & BaseSelectUserInputSetupState
export type BaseSelectUserInputVM = ComponentRenderProxy<BaseSelectUserInputProps> & CommonComponentInstance & BaseSelectUserInputInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserInput,
  emits: [
    BaseSelectUserInputEmitEventNameEnum.Input,
  ],
  props: {
    collapse: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    multiple: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    placeholder: {
      type: String as PropType<string>,
      default: t('common.placeholder.select')
    },
    value: {
      type: Array as PropType< Record<string, any>[]>,
      default: () => []
    },
    max: {
      type: Number as PropType<number>,
      default: BaseSelectUserMax
    },
    error: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: BaseSelectUserInputProps, { emit }) {
    
    const selectedUsers: ComputedRef<any[]> = computed(() => {
      
      let value = props?.value || []
      
      value = value.map(item => {
        return {
          ...item,
          displayName: item.displayName || item.name || item.label,
          userId: item.userId || item.id || item.value,
          label: item.label || item.displayName || item.name,
          value: item.value || item.userId,
          staffId: item.staffId || '',
        }
      })
      
      return value
      
    })
    
    const onFocusHandler = () => {
      
      const options = {
        title: props.placeholder,
        max: props.max,
        selectedUsers: selectedUsers.value,
        mode: BaseSelectUserModeEnum.Filter
      }
      
      const singleChoose = BaseSelectUser.props.single.user
      const multipleChoose = BaseSelectUser.props.multi.user
      const chooseUser = props.multiple ? multipleChoose : singleChoose
      
      chooseUser(options).then(result => {
        
        const users = result.data?.users || []
        
        onInputHandler(users)
        
      })
      
    }

    const onUserRemove = (index: number) => {
      const newValue = [...props.value]
      newValue.splice(index, 1)
      emit(BaseSelectUserInputEmitEventNameEnum.Input, newValue)
    }
    
    const onInputHandler = (value: any) => {
      emit(BaseSelectUserInputEmitEventNameEnum.Input, value)
    }
    
    return {
      selectedUsers,
      onUserRemove,
      onFocusHandler,
      onInputHandler
    }
  },
  render(h: CreateElement) {
    
    const classNames = [
      BaseSelectUserComponentNameEnum.BaseSelectUserInput,
      this.error ? 'base-select-user-input--error' : ''
    ]
    
    return (
    <div  class="user-select-tags__wrap" onClick={this.onFocusHandler}>
      {this.selectedUsers.map((item: any, index: number) => {
        return (
          <el-tag
            type="info"
            closable
            onClose={() => this.onUserRemove(index)}
          >
            <open-data type="userName" openid={item.staffId} name={item.label}></open-data>
          </el-tag>
        )
      })}
    </div>
    )
  }
})
